<!DOCTYPE html>
<html>
  <head>
  	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>Battleship...</title>
	<script type="text/javascript"></script>
  </head>
  <body> 
    <table id="layoutTable" border>
      <tr><!-- Row 1 -->
	     <td id="banner" colspan="4">
		 </td><!-- Col 1 -->
		 <!--<td rowspan="3" id="logBox" style="vertical-align:bottom;"><textarea readonly="readonly" style="height:300px; width:250px;"></textarea></td>
      --></tr>	
      <tr><!-- Row 2 -->
         <td>		 
		 	 <table id="playerField" border>
			 	  <tbody>
                  <tr><th></th>
                      <th>A</th><th>B</th><th>C</th><th>D</th><th>E</th>
                      <th>F</th><th>G</th><th>H</th><th>I</th><th>J</th>
                  </tr>
                  <tr><th>1</th>
                      <td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td>
                      <td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td>
                  </tr>
                  <tr><th>2</th>
                      <td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td>
                      <td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td>
                  </tr>
                  <tr><th>3</th>
                      <td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td>
                      <td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td>
                  </tr>
                  <tr><th>4</th>
                      <td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td>
                      <td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td>
                  </tr>
                  <tr><th>5</th>
                      <td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td>
                      <td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td>
                  </tr>
                  <tr><th>6</th>
                      <td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td>
                      <td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td>
                  </tr>
                  <tr><th>7</th>
                      <td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td>
                      <td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td>
                  </tr>
                  <tr><th>8</th>
                      <td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td>
                      <td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td>
                  </tr>
                  <tr><th>9</th>
                      <td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td>
                      <td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td>
                  </tr>
                  <tr><th>10</th>
                      <td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td>
                      <td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td>
                  </tr>
                  </tbody>
              </table>
		 </td><!-- Col 1 -->
		 <td>
		 	  <table id="enemyField" border>
        	 	  <tbody>
                  <tr><th></th>
                      <th>A</th><th>B</th><th>C</th><th>D</th><th>E</th>
                      <th>F</th><th>G</th><th>H</th><th>I</th><th>J</th>
                  </tr>
                  <tr><th>1</th>
                      <td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td>
                      <td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td>
                  </tr>
                  <tr><th>2</th>
                      <td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td>
                      <td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td>
                  </tr>
                  <tr><th>3</th>
                      <td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td>
                      <td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td>
                  </tr>
                  <tr><th>4</th>
                      <td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td>
                      <td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td>
                  </tr>
                  <tr><th>5</th>
                      <td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td>
                      <td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td>
                  </tr>
                  <tr><th>6</th>
                      <td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td>
                      <td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td>
                  </tr>
                  <tr><th>7</th>
                      <td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td>
                      <td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td>
                  </tr>
                  <tr><th>8</th>
                      <td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td>
                      <td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td>
                  </tr>
                  <tr><th>9</th>
                      <td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td>
                      <td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td>
                  </tr>
                  <tr><th>10</th>
                      <td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td>
                      <td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td><td style="background-image:url('batt100.gif'); background-size:100%;"></td>
                  </tr>
                  </tbody>
              </table>
		 </td><!-- Col 2 -->
         <td id="score">
		 <table border="1"  width="100%">
		 	<tr><!-- Heading -->
				<th>ship</th><th>player</th><th>enemy</th>
			</tr>
            <tr><!-- Row 1 -->
               <th>5</th><!-- Col 1 -->
               <td><img src="batt1.gif" /><img src="batt2.gif" /><img src="batt3.gif" /><img src="batt4.gif" /><img src="batt5.gif" /></td><!-- Col 2 -->
               <td><img src="batt201.gif" /><img src="batt202.gif" /><img src="batt202.gif" /><img src="batt202.gif" /><img src="batt203.gif" /></td><!-- Col 3 -->
            </tr>
            <tr><!-- Row 2 -->
               <th>4</th><!-- Col 1 -->
               <td><img src="batt1.gif" /><img src="batt2.gif" /><img src="batt3.gif" /><img src="batt5.gif" /></td><!-- Col 2 -->
               <td><img src="batt201.gif" /><img src="batt202.gif" /><img src="batt202.gif" /><img src="batt203.gif" /></td><!-- Col 3 -->
            </tr>
            <tr><!-- Row 3 -->
               <th>3</th><!-- Col 1 -->
               <td><img src="batt1.gif" /><img src="batt2.gif" /><img src="batt5.gif" /></td><!-- Col 2 -->
               <td><img src="batt201.gif" /><img src="batt202.gif" /><img src="batt203.gif" /></td><!-- Col 3 -->
            </tr>
            <tr><!-- Row 4 -->
               <th>3</th><!-- Col 1 -->
               <td><img src="batt1.gif" /><img src="batt3.gif" /><img src="batt5.gif" /></td><!-- Col 2 -->
               <td><img src="batt201.gif" /><img src="batt202.gif" /><img src="batt203.gif" /></td><!-- Col 3 -->
            </tr>
            <tr><!-- Row 5 -->
               <th>2</th><!-- Col 1 -->
               <td><img src="batt1.gif" /><img src="batt5.gif" /></td><!-- Col 2 -->
               <td><img src="batt201.gif" /><img src="batt203.gif" /></td><!-- Col 3 -->
            </tr>
            <td id="scoreBox" colspan="3"><textarea id="scoreTA" readonly="readonly"></textarea></td>      
         </table>
       
		 </td><!-- Col 3 -->
		 <td id="logBox"><textarea id="logTA" readonly="readonly"></textarea></td>      
      </tr>
      <tr><!-- Row 3 -->
         <td id="actionButtons" colspan="3">
            <input class="minimal" name="Rotate" value="Rotate ship" type="button">
            <input class="minimal" name="Generate" value="Generate board" type="button">
            <input class="minimal" name="ClearBoard" value="Clear board" type="button">
            <input class="minimal" name="Confirm" value="Attack" type="button">
            <input class="minimal" name="History" value="History" type="button">
            <input class="minimal" name="Help" value="Help" type="button">
         </td><!-- Col 1 -->
         <td id="entryBox">
		 	 <form name="message" action="">  
             	   <input id="entryBox" size="28" />
                   <input name="submitmsg" type="submit" id="submitmsg" value="Send" />
             </form>
		 </td><!-- Col 2 -->
      </tr>
    </table>
  </body>
</html>